import { useState, memo } from 'react';
import { Column as AntColumn } from '@ant-design/plots';
import { isEqual } from 'lodash';

const DemoBar = memo(
  ({ data, config, onReady }) => {
    const chartConfig = {
      data,
      xField: 'category',
      yField: 'value',
      seriesField: 'type',
      isGroup: true,
      animation: {
        appear: {
          animation: 'path-in',
          duration: 1000,
        },
      },
      legend: {
        position: 'top-right',
      },
      tooltip: {
        showMarkers: false,
      },
      ...config,
      onReady,
    };
    return <AntColumn {...chartConfig} />;
  },
  (pre, next) => {
    return isEqual(pre?.data, next?.data) && isEqual(pre?.config, next?.config);
  },
);

const BarChart = ({ data = null, config = {}, onReady = () => {} }) => {
  // 默认模拟数据 - 月度统计
  const defaultData = [
    { category: '一月', value: 4000, type: '访问量' },
    { category: '二月', value: 3000, type: '访问量' },
    { category: '三月', value: 5000, type: '访问量' },
    { category: '四月', value: 2800, type: '访问量' },
    { category: '五月', value: 5900, type: '访问量' },
    { category: '六月', value: 3200, type: '访问量' },
    { category: '一月', value: 2400, type: '用户数' },
    { category: '二月', value: 1398, type: '用户数' },
    { category: '三月', value: 3200, type: '用户数' },
    { category: '四月', value: 1980, type: '用户数' },
    { category: '五月', value: 3600, type: '用户数' },
    { category: '六月', value: 2100, type: '用户数' },
  ];

  return <DemoBar data={data || defaultData} config={config} onReady={onReady} />;
};

export default BarChart;